<template>
	<view>
		<view class="uni-header">
			<view class="headerContent">
				<view class="headerContent-input">
					<el-input v-model="equipment_id" size="default" :autofocus="true" placeholder="请输入装备编号"
						style="width: 230px;" clearable />
				</view>
				<view class="headerContent-button">
					<el-button type="primary" icon="Search" @click="search">查询</el-button>
					<el-button type="danger" icon="Delete" @click="clearList">清空列表</el-button>
					<el-button type="success" icon="Connection">连接扫码枪</el-button>
				</view>
				<view class="headerContent-switch">
					<!-- <el-text>当前模式: </el-text>
					<el-switch v-model="isAutoInStorage" inline-prompt
						style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="自动入库"
						inactive-text="手动入库" /> -->
					<el-button type="primary" icon="Upload" @click="allOut">一键出库</el-button>
				</view>

			</view>
		</view>
		<view class="uni-container">
			<view class="bodyTable">
				<el-table :data="tableData" style="width: 100%" height="100%" :cell-style="{ textAlign: 'center' }"
					:header-cell-style="{ 'text-align': 'center' }" empty-text=" ">
					<el-table-column fixed prop="id" label="资产编号" width="220" />
					<el-table-column prop="equipmentCode" label="资产编码" width="250" />
					<el-table-column prop="storage" label="所属仓库" width="100" />
					<el-table-column prop="totalClassify" label="资产总类" width="200">
						<template #default="scope">
							<el-tag :type="tagTotalClassifyContent(scope.row.totalKeyName)">
								{{scope.row.totalClassify}}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="classify" label="资产分类" width="200" />
					<el-table-column prop="name" label="资产名称" width="150" />
					<el-table-column prop="firm" label="品牌厂商" />
					<el-table-column prop="storageState" label="库存状态">
						<template #default="scope">
							<el-tag :type="tagStorageContent(scope.row.storageState)" effect="dark">
								{{scope.row.storageState == true ? "在库" : "出库"}}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="equipmentStateInfo" label="资产状态" width="150">
						<template #default="scope" class="equipmentStateInfo">
							<uni-icons type="smallcircle-filled" size="16"></uni-icons>
							<text>{{equipmentStateInfo_localdata[scope.row.equipmentStateInfo]}}</text>
						</template>
					</el-table-column>
					<el-table-column label="过保时间" width="200">
						<template #default="scope">
							<uni-dateformat :threshold="[0, 0]" :date="scope.row.overInsuranceTime"></uni-dateformat>
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作">
						<el-button type="danger" icon="Delete" circle />
					</el-table-column>
				</el-table>
			</view>
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database()
	export default {
		data() {
			return {
				equipment_id: "",
				isAutoInStorage: false,
				tableData: [],
				tableIdData: [],
				equipmentStateInfo_localdata: [
					"建档阶段", "在库可用", "领用出库", "上报故障", "确认故障", "维修中", "已报废", "禁止使用"
				]
			}
		},
		methods: {
			getIdLastThree(id) {
				const res = id ? id.slice(-3) : ''
				return res.toUpperCase();
			},
			tagTotalClassifyContent(content) {
				// 根据Tag内容返回相应的type
				if (content === 'A01') {
					return 'success';
				} else if (content === 'B02') {
					return 'warning';
				} else if (content === 'C03') {
					return 'primary';
				} else if (content === 'D04') {
					return 'danger';
				} else {
					return 'primary'; // 默认类型
				}
			},
			tagStorageContent(content) {
				// 根据Tag内容返回相应的type
				if (content === true) {
					return 'success';
				} else {
					return 'warning';
				}
			},
			async search() {
				if (this.equipment_id == "") {
					return;
				}
				const _this = this

				console.log(this.equipment_id)
				//联表查询
				const equipmentInfo = db.collection('tab_EquipmentInfo').where({
					_id: this.equipment_id
				}).getTemp()

				await db.collection(equipmentInfo,
						'tab_StorageInfo', 'tab_EquipmentTotalClassify', 'tab_EquipmentClassify', 'tab_EquipmentFirms')
					.field(
						'storage_id{_id,storageName,area},totalClassify_id{_id,totalKeyName,totalKeyValue},classify_id{_id,classifyName,classifyNickName,directoryCategories,directoryIndex},firm_id{_id,firmName},equipmentName,imgFile,storageState,equipmentStateInfo,purchaseTime,overInsuranceTime'
					)
					.get()
					.then((res) => {
						const receivedData = res.result.data
						// console.log(receivedData)
						const objRes = receivedData.map(item => ({
							id: item._id,
							equipmentCode: `GZ·${item.classify_id[0].classifyNickName}/${item.totalClassify_id[0].totalKeyName}${item.classify_id[0].directoryIndex}-${this.getIdLastThree(item._id)}.${item.storage_id[0].area}`,
							storage: `${item.storage_id[0].storageName}`,
							totalKeyName: `${item.totalClassify_id[0].totalKeyName}`,
							totalClassify: `${item.totalClassify_id[0].totalKeyValue}_${item.totalClassify_id[0].totalKeyName}`,
							classify: `${item.classify_id[0].classifyName}`,
							name: item.equipmentName,
							firm: `${item.firm_id[0].firmName}`,
							storageState: item.storageState,
							equipmentStateInfo: item.equipmentStateInfo,
							overInsuranceTime: item.overInsuranceTime
						}));
						// console.log(objRes)
						this.tableData.push(objRes[0])
						this.tableIdData.push(objRes[0].id)
						// console.log(this.tableData)
					}).catch((err) => {
						console.log(err)
					})
			},
			clearList() {
				this.tableData = []
				this.tableIdData = []
			},
			async allOut() {
				if (this.tableIdData.length == 0) {
					return;
				}
				const db = uniCloud.databaseForJQL()
				const dbCmd = db.command
				let collection = db.collection("tab_EquipmentInfo")
				await collection.where({
					_id: dbCmd.in(this.tableIdData)
				}).update({
					storageState: false,
				}).then((res) => {
					console.log("进入")
					this.clearList()
					this.$message({
						type:'success',
						message:'一键出库成功'
					})
				}).catch((err) => {
					console.log("错误")
					this.$message.error("一键出库失败")
				})
			}
		}
	}
</script>

<style>
	.headerContent {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
	}

	.headerContent-input {
		margin-right: 10px;
	}

	.headerContent-switch {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		width: 150px;
		margin-left: 10px;

	}

	.equipmentStateInfo {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
</style>